'use client';

import { useState, useEffect, useCallback } from 'react';
import { SudokuGridComponent } from '@/components/sudoku-grid';
import { NumberPad } from '@/components/number-pad';
import { Calendar, Trophy, Clock } from 'lucide-react';
import {
  generateDailyPuzzle,
  validateMove,
  checkComplete,
  SudokuGrid,
  Difficulty
} from '@/lib/sudoku';

export default function DailyChallengePage() {
  const [grid, setGrid] = useState<SudokuGrid | null>(null);
  const [selectedCell, setSelectedCell] = useState<{ row: number; col: number } | null>(null);
  const [difficulty] = useState<Difficulty>('medium');
  const [time, setTime] = useState(0);
  const [errors, setErrors] = useState(0);
  const [isComplete, setIsComplete] = useState(false);
  const [currentDate, setCurrentDate] = useState<Date | null>(null);

  useEffect(() => {
    const today = new Date();
    setCurrentDate(today);
    setGrid(generateDailyPuzzle(today, difficulty));
  }, [difficulty]);

  useEffect(() => {
    if (!isComplete && grid) {
      const timer = setInterval(() => {
        setTime((prev) => prev + 1);
      }, 1000);
      return () => clearInterval(timer);
    }
  }, [isComplete, grid]);

  const handleCellClick = (row: number, col: number) => {
    if (grid && !grid[row][col].isFixed && !isComplete) {
      setSelectedCell({ row, col });
    }
  };

  const handleNumberSelect = (num: number) => {
    if (!selectedCell || isComplete || !grid) return;

    const { row, col } = selectedCell;
    if (grid[row][col].isFixed) return;

    const newGrid = grid.map((r, i) =>
      r.map((cell, j) => {
        if (i === row && j === col) {
          return { ...cell, value: num, isError: false };
        }
        return cell;
      })
    );

    const isValid = validateMove(newGrid, row, col);

    if (!isValid) {
      newGrid[row][col].isError = true;
      setErrors((prev) => prev + 1);
    }

    setGrid(newGrid);

    if (checkComplete(newGrid)) {
      setIsComplete(true);
      saveCompletionToLocalStorage();
    }
  };

  const handleClear = () => {
    if (!selectedCell || isComplete || !grid) return;

    const { row, col } = selectedCell;
    if (grid[row][col].isFixed) return;

    const newGrid = grid.map((r, i) =>
      r.map((cell, j) => {
        if (i === row && j === col) {
          return { ...cell, value: 0, isError: false };
        }
        return cell;
      })
    );

    setGrid(newGrid);
  };

  const saveCompletionToLocalStorage = () => {
    if (!currentDate) return;

    const dateKey = currentDate.toISOString().split('T')[0];
    const completionData = {
      date: dateKey,
      time,
      errors,
      difficulty
    };

    localStorage.setItem(`sudoku-daily-${dateKey}`, JSON.stringify(completionData));
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  if (!grid || !currentDate) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 flex items-center justify-center">
        <div className="text-2xl font-bold text-gray-700">Loading daily challenge...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 py-8 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Calendar className="w-8 h-8 text-purple-600" />
            <h1 className="text-4xl font-bold text-gray-900">Daily Challenge</h1>
          </div>
          <p className="text-xl text-gray-600">
            {currentDate.toLocaleDateString('en-US', {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric'
            })}
          </p>
          <p className="text-gray-500 mt-2">
            A new puzzle every day. Come back tomorrow for a fresh challenge!
          </p>
        </div>

        {isComplete && (
          <div className="bg-gradient-to-r from-green-100 to-green-200 border-2 border-green-500 rounded-lg p-6 mb-8 text-center max-w-md mx-auto">
            <Trophy className="w-12 h-12 text-green-600 mx-auto mb-3" />
            <h2 className="text-2xl font-bold text-green-800 mb-2">
              Challenge Complete!
            </h2>
            <p className="text-green-700">
              Time: {formatTime(time)} | Errors: {errors}
            </p>
            <p className="text-sm text-green-600 mt-2">
              Come back tomorrow for a new challenge!
            </p>
          </div>
        )}

        <div className="grid lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 flex flex-col items-center gap-6">
            <SudokuGridComponent
              grid={grid}
              selectedCell={selectedCell}
              onCellClick={handleCellClick}
            />
            <div className="lg:hidden">
              <NumberPad onNumberSelect={handleNumberSelect} onClear={handleClear} />
            </div>
          </div>

          <div className="flex flex-col gap-6">
            <div className="bg-white rounded-lg shadow-md p-6">
              <div className="flex items-center gap-2 mb-4">
                <Clock className="w-6 h-6 text-gray-600" />
                <h3 className="text-xl font-bold text-gray-900">Stats</h3>
              </div>
              <div className="space-y-4">
                <div>
                  <div className="text-sm text-gray-600">Time</div>
                  <div className="text-3xl font-bold text-gray-900">{formatTime(time)}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-600">Errors</div>
                  <div className="text-3xl font-bold text-red-600">{errors}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-600">Difficulty</div>
                  <div className="text-lg font-semibold text-gray-900 capitalize">{difficulty}</div>
                </div>
              </div>
            </div>

            <div className="hidden lg:block">
              <NumberPad onNumberSelect={handleNumberSelect} onClear={handleClear} />
            </div>

            <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6">
              <h3 className="text-lg font-bold text-gray-900 mb-3">About Daily Challenge</h3>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• New puzzle every 24 hours</li>
                <li>• Same puzzle for everyone worldwide</li>
                <li>• Track your daily progress</li>
                <li>• Compete with friends on time</li>
              </ul>
            </div>
          </div>
        </div>

        <div className="mt-12 max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
          <h3 className="text-xl font-bold mb-4 text-gray-900">Daily Challenge Tips</h3>
          <ul className="space-y-2 text-gray-700">
            <li>• Take your time—accuracy is more important than speed</li>
            <li>• The daily puzzle is the same for everyone</li>
            <li>• Challenge friends to beat your time</li>
            <li>• Check back every day for new puzzles</li>
            <li>• Use hints sparingly to improve your skills</li>
          </ul>
        </div>
      </div>
    </div>
  );
}
